import getComponentRootDom from "./getComponentRootDom"
import Icon from "@/components/Icon"
import Styles from "@/styles/msg.module.less"

// 设计建议：给每个弹框单独设计一个容器管理消息频繁触发堆叠的问题

// /**
//  * 消息弹框函数
//  * @param {String} content 消息体
//  * @param {String} type 消息类型
//  * @param {Number} duration 持续时间
//  * @param {HTMLElement} container 绑定容器
//  */
// export default function(content, type="info", duration= 2000, container) {

/**
 * 显示一个消息提示框
 * @param {Object} options - 配置选项
 * @param {string} options.content - 消息内容
 * @param {string} [options.type='info'] - 消息类型，可以是 'info', 'success', 'warning', 'error'
 * @param {number} [options.duration=2000] - 消息显示的持续时间（毫秒）
 * @param {HTMLElement} [options.container=document.body] - 消息提示框的容器元素，默认为 document.body
 * @param {callback} [options.callback] - 弹框删除执行的回调函数
 * @returns {Function} 一个用于关闭消息提示框的函数
 */
export default function(options = {}) {
  const content = options.content || ''
  const type = options.type || 'info'
  const duration = options.duration || 2000
  const container = options.container || document.body
  // 修改弹框样式
  const div = document.createElement('div')
  const elIcon = getComponentRootDom(Icon, {type})
  div.innerHTML = `<span>${elIcon.outerHTML}</span><div>${content}</div>`


  div.className = `${Styles.msg} ${Styles['msg-'+type]}`;

  // 插入弹框
  if (options.container) {
    // 避免body 添加了 相对定位
    if (getComputedStyle(container).position === 'static') {
      container.style.position = "relative"
    }
  }
  container.appendChild(div)

  // 强行渲染
  div.clientHeight
  div.style.opacity = 1;
  div.style.transform = `translate(-50%, -50%)`;


  // 弹框消失
  let timerFade = null

  timerFade = setTimeout(() => {
    if (timerFade) clearTimeout(timerFade);
    // div.clientHeight
    div.style.opacity = 0;
    div.style.transform = `translate(-50%,-50%) translateY(25px)`
    div.addEventListener('transitionend', () => {
      div.remove()
      options.callback && options.callback()
    }, { once: true })
  }, duration);
}


